import React from 'react';
import { Input, Checkbox, Select, Icon, DatePicker, Row, Col } from 'antd';
import moment from 'moment';
import QueueAnim from 'rc-queue-anim';
// import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';

import TaskTimeSelect from './TaskTimeSelect';

moment.locale('zh-cn');

const Option = Select.Option;
const emptyText = '';

const styles = {
    spanStyle: {
        color: '#000',
        paddingLeft: '10px',
        wordBreak: 'break-all'
    },
    divStyle: {
        padding: '4px 0',
        paddingTop: '0px',
    },
    list: {
        paddingLeft: '8px',
        color: '#000'
    },
    wrapInput: {
        display: 'flex',
        alignItems: 'center',
        marginBottom: '4px'
    },
    firstInput: {
        width: '100px',
        marginRight: '10px'
    },
    minus: {
        fontSize: '24px',
        lineHeight: '23px',
        marginLeft: '10px',
        cursor: 'pointer',
    },
    re: {
        position: 'relative',
        paddingRight: '30px',
        minHeight: '22px'
    },
    plus: {
        position: 'absolute',
        top: '-5px',
        right: '4px',
        fontSize: '24px',
        cursor: 'pointer',
    }
}

function EditInput ({ edit, value, placeholder, onChange }) {
    
    return (
        edit ? (
            <div style={styles.divStyle} >
                <Input 
                    placeholder={placeholder}
                    value={value || ''}
                    onChange={(e) => onChange(e.target.value)}
                />
            </div> 
        ) :
        <span style={styles.spanStyle}>{value || emptyText}</span>
    )
    
}

function EditInputModal ({ edit, value, onClick }) {
    
    return (
        edit ? (
            <div style={styles.divStyle} onClick={onClick}>
                <Input
                    value={value}
                    suffix={<Icon type="down" style={{ color: 'rgba(0,0,0,.25)' }} />}
                />
            </div>
        ) :
        <span style={styles.spanStyle}>{value}</span>
    )
    
}

class EditMultiInput extends React.Component {

    onChange = (key, idx) => (e) => {
        const { onChange, value } = this.props;
        const newItem = {...value[idx], [key]: e.target.value};
        const newList = value.concat();
        newList[idx] = newItem;
        onChange(newList);
    }

    onPlus = () => {
        const { onChange, value } = this.props;
        const newList = value.concat();
        newList.push({});
        onChange(newList);
    }

    onMinus = (i) => () => {
        const { onChange, value } = this.props;
        onChange([
            ...value.slice(0, i),
            ...value.slice(i + 1),
        ]);
    }

  
    render() {
        const { edit, value } = this.props;
      return (
        edit ? (
            <div style={{ ...styles.divStyle, ...styles.re }}>
                <span className="mdi mdi-plus-circle-outline mainColor" style={styles.plus} onClick={this.onPlus} />
                <QueueAnim type={['right', 'left']} leaveReverse>
                {(value.length ? value : [{}]).map((v, i) => {
                    return (
                        <div key={v.recid || `wrap${i}`} style={styles.wrapInput}>
                            <Input 
                                placeholder="姓名"
                                style={styles.firstInput}
                                value={v.name || ''}
                                onChange={this.onChange('name', i)}
                            />
                            <Input 
                                placeholder="联系电话"
                                value={v.phone || ''}
                                onChange={this.onChange('phone', i)}
                            />
                            {value.length > 1 ? <span className="mdi mdi-minus-circle-outline mainColor" style={styles.minus} onClick={this.onMinus(i)} /> : null}
                        </div>
                    )
                })}
                </QueueAnim>
            </div>
        ) : (
            <div style={styles.list}>
                {value.length ? value.map((v, i) => <div key={v.recid}>{`${v.name || ''}, ${v.phone || emptyText}`}</div>) : emptyText}
            </div>
        )
      );
    }
}

class AntEditDatePicker extends React.Component {

  
    render() {
        const { edit, value, placeholder, onChange } = this.props;
        return (
            edit ? <div style={styles.divStyle}>
                <DatePicker 
                    style={{ width: '100%' }}
                    placeholder={placeholder}
                    onChange={date => onChange(moment(date).format('YYYY-MM-DD HH:mm:ss'))} 
                    value={value ? moment(value) : undefined }
                />
            </div> : 
            <span style={styles.spanStyle}>{value ? moment(value).format('YYYY-MM-DD') : emptyText}</span>
        );
    }
}

class EditDatePicker extends React.Component {

    onOk = (v) => {
        this.props.onOk(moment(v).format('YYYY-MM-DD HH:mm:ss'));
    }
  
    render() {
        const { edit, value, marks, onOk } = this.props;
        return (
            edit ? <div style={styles.divStyle}>
                <TaskTimeSelect
                    onOk={onOk}
                    value={new Date(value)}
                    marks={marks}
                />
            </div> : 
            <span style={styles.spanStyle}>{moment(value).format('YYYY-MM-DD dddd HH:mm')}</span>
        );
    }
}

class EditCheckbox extends React.Component {
  
    
    render() {
        const { edit, value, options, onChange } = this.props;

        let data = [];
        if(!edit) {
            options.forEach(v => {
                if(value.includes(`${v.aheadtype}-${v.aheadvalue}`)) data.push(v.recname);
            });
        }

        return (
            edit ? (
                <div style={styles.divStyle}>
                    <Checkbox.Group style={{ width: '100%' }} onChange={onChange} value={value}>
                        <Row>
                            {options.map((v, i) => (
                                <Col span={6} key={`gcb${i}`}>
                                    <Checkbox value={`${v.aheadtype}-${v.aheadvalue}`}>{v.recname}</Checkbox>
                                </Col>
                            ))}
                        </Row>
                    </Checkbox.Group>
                </div>
            ) : 
            <span style={styles.spanStyle}>{data.join('；')}</span>
        );
    }
}

function EditSelect ({ edit, value, onChange, options, placeholder }) {
    
    let data = {};
    if(!edit) data = options.find(v => v.repeattype === value) || {};

    return (
        edit && options ? (
            <div style={styles.divStyle} >
                <Select value={value} style={{ width: 120 }} onChange={onChange} placeholder={placeholder}>
                    {options.map(v => <Option value={v.repeattype} key={v.repeattype}>{v.recname}</Option>)}
                </Select>
            </div> 
        ) :
        <span style={styles.spanStyle}>{data.recname}</span>
    )
    
}
  
  

export { EditInputModal, EditInput, EditMultiInput, EditDatePicker, AntEditDatePicker, EditCheckbox, EditSelect }